$(function () {
    let couponid = getQueryString('couponId')
    let container = document.querySelector('.product')
    let ulCon = document.querySelector('.carousel>.pic>ul')
    fetch('http://chst.vip:1234/api/getcouponproduct?couponid=' + couponid)
        .then(body => body.json())
        .then(res => {
            let str = ''
            let ulStr = ''
            res.result.forEach((item, index) => {
                str += `<div class="box" index=${index}>
            <div class="boxLeft">
                ${item.couponProductImg}
            </div>
            <div class="boxRight">
                <div class="name">
                    <h4>${item.couponProductName}</h4>
                </div>
                <div class="price">
                    <h4>${item.couponProductPrice}</h4>
                </div>
                <div class="time">
                ${item.couponProductTime}
                </div>
            </div>
        </div>`
                ulStr += `<li value=1>${item.couponProductImg}</li>`
            })
            container.innerHTML = str
            ulCon.innerHTML = ulStr
            let length = $('.product>div:last-of-type').attr('index') - 0 + 1
            let onePicWidth = $('.carousel>.pic>ul>li').width() - 0
            let leftBtn = document.querySelector('.carousel>.leftBtn')
            let rightBtn = document.querySelector('.carousel>.rightBtn')
            let ul = document.querySelector('.carousel>.pic>ul')
            let lastIndex = document.querySelector('.product>.box:last-of-type').getAttribute('index')
            $('.carousel>.pic>ul').css('width', onePicWidth * length + 'px')
            $('.product>.box').click(function () {
                $(".carousel>.pic>ul").css('left', -($(this).attr('index')) * $('.carousel>.pic>ul>li>img').width() + 'px')
                $('.carousel').animate({ top: '0' }, 500).find('.pic').find("i").click(function () {
                    $(this).parent().parent().animate({ top: '-100%' }, 500)
                })
                $('.carousel>.leftBtn').click(function () {
                    let ulLeft = ul.style.left.replace('px', "") - 0
                    if (ulLeft < 0) {
                        $('.carousel>.pic>ul').animate({ left: ulLeft + onePicWidth + 'px' }, 500)
                    }

                })
                $('.carousel>.rightBtn').click(function () {
                    let ulLeft = ul.style.left.replace('px', "") - 0
                    if (ulLeft > -((length - 1) * onePicWidth)) {
                        $('.carousel>.pic>ul').animate({ left: ulLeft - onePicWidth + 'px' }, 500)
                }
                })
            })
            $('#header>a:nth-of-type(1)').click(function () {
                location.href = './coupons.html'
            })
        })
})